<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}

			.title {
				padding: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				background-color: #fff;
			}

			.location {
				padding: 0 10px;
				line-height: 22px;
			}

			.mui-table-view-cell.position:after,
			.mui-table-view-cell.left0:after {
				left: 0;
			}

			.position i {
				height: 21px;
			}

			.position {
				overflow: hidden;
				margin: 10px 0;
			}

			.mui-table-view-cell {
				background: #fff;
			}

			.mui-table-view {
				background: inherit;
			}

			.fuwu {
				padding: 0 10px;
			}

			.mui-table-view p {
				color: #333;
			}

			.mb10 {
				margin-bottom: 10px;
			}

			.quanLists .discount_items span {
				display: inline-block;
				line-height: 15px;
				color: #8f8f94;
				margin: 3px 0;
			}

			.quanLists .discount_items i {
				display: inline-block;
				height: 18px;
				width: 18px;
				line-height: 18px;
				text-align: center;
				margin-right: 10px;
				margin-left: 2px;
				font-style: normal;
			}

			.quanLists .discount_items span {
				border: 1px solid #fff;
				background-color: rgba(255, 255, 255, 1);
				padding-right: 5px;
			}

			.quanLists .discount_items.quan i {
				background-color: orange;
				color: #000;
			}

			.quanLists .discount_items.jian i {
				background-color: deeppink;
				color: #fff;
			}

			.quanLists .discount_items.zhe i {
				background-color: #9f35ff;
				color: #fff;
			}

			.quanLists .discount_items.ding i {
				background-color: #82d900;
				color: #fff;
			}

			.quanLists .discount_items.shou i {
				background-color: orange;
				color: #fff;
			}
			.msgitems {
				padding-left: 10px;
			}
		</style>
	</head>

	<body>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell position left0">
				<i class="mui-icon mui-icon-location mui-pull-left"></i>
				<p class="mui-pull-left location">新疆乌鲁木齐水磨沟区南湖北路苏州路社区门面23号</p>
				<i class="mui-icon mui-icon-phone mui-pull-right"></i>
			</li>
			<li class="mui-table-view-cell">
				<div>
					<i class="mui-icon mui-icon-bars mui-pull-left"></i>
					<p class="mui-pull-left fuwu">配送服务: <span>美团专送</span> 提供高平直送餐服务</p>
				</div>
			</li>
			<li class="mui-table-view-cell left0 mb10">
				<div>
					<i class="mui-icon mui-icon-loop mui-pull-left"></i>
					<p class="mui-pull-left fuwu">配送时间: 13:00-23:00</p>
				</div>
			</li>
			<li class="mui-table-view-cell">
				<div class="mui-navigate-right">
					<i class="mui-icon mui-icon-loop mui-pull-left"></i>
					<p class="mui-pull-left mui-ellipsis msgitems">小店全场打折哦~菜新鲜、环保不添加任何添加剂、质量第一！便宜、实惠、好吃、懒得打字了~~</p>
				</div>
			</li>
			<li class="mui-table-view-cell left0">
				<div class="quanLists">
					<p class="discount_items quan"><span><i>券</i>已有3张最高减30元代金券</span></p>
					<p class="discount_items jian"><span><i>减</i>满39减3,满69减8,满98减10</span></p>
					<p class="discount_items zhe"><span><i>折</i>折扣商品1折起</span></p>
					<p class="discount_items ding"><span><i>订</i>下单多减1元,限09:00-11:30</span></p>
					<p class="discount_items shou"><span><i>首</i>新用户立减20元,首次使用银行卡支付最高再减3元</span></p>
				</div>
			</li>
		</ul>
		<script src="js/mui.min.js"></script>
		<script>
			var Ww = document.body.offsetWidth;
			document.getElementsByClassName('location')[0].style.width = (Ww - 78) + 'px';
			document.getElementsByClassName('msgitems')[0].style.width = (Ww - 78) + 'px';
			mui.init({
				swipeBack: false,
				keyEventBind: {
					backbutton: false //关闭back按键监听
				}
			});
		</script>
	</body>

</html>